import React, { useState, useEffect } from 'react'
import {Table} from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { IUser, IUserList } from '../api/model/usersTypes';
import { getUsers } from '../api/users';

export default function AxiosTest() {
    // 分页所需状态
    let [users, setUsers] = useState<IUserList>([]);
    let [current, setCurrent] = useState<number>(1);
    let [pageSize, setPageSize] = useState<number>(3);
    let [total, setTotal] = useState<number>(10);


    // 定义table 的列
    const columns: ColumnsType<IUser> = [
        {
            title:'id',
            dataIndex:'id'
        },
        {
            title:'用户名',
            dataIndex:'login'
        },
        {
            title:'主页',
            render(row:IUser){
                return <a href={row.html_url}>{row.login}</a>
            }
        },
        {
            title:'头像',
            render(row:IUser){
                return <img width={100} src={row.avatar_url}/>
            }
        }
    ]
    // 组件加载完之后，请求数据
    useEffect(() => {
        async function main(){
            let res = await getUsers()
            console.log('res: ',res);
            console.log(res.items);
            // 设置users状态
            setUsers(res.items);
            // 设置总条数
            setTotal(res.items.length);
        }
        main();
    }, [])

    return (
        <div>
            <Table 
                rowKey={'id'}
                columns={columns}
                dataSource={users}
                pagination={{
                    current,
                    pageSize,
                    total,
                    onChange(page:number, pageSize:number){
                        setCurrent(page);
                        setPageSize(pageSize);
                    }
                }}
            />

        </div>
    )
}
